<template>
  <div>
    <button @click="sub(5)">-5</button>
    <span>{{ count }}</span>
    <button @click="add(5)">+5</button>
    <br />
    <!-- <button @click="sub">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button> -->
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.num;
    },
  },
  methods: {
      sub(i){
          this.$store.dispatch("deAction",i)
      },
      add(i){
          this.$store.dispatch("inAction",i)
      }
    // sub(i = 1) {
    //   // 触发 store 中 mutation 下的方法，使用 store.commit()触发
    //   if (typeof i === "object") {
    //     this.$store.commit("decrement");
    //   } else if (typeof i === "number") {
    //     this.$store.commit("decrement", i);
    //   }
    // },
    // add(i = 1) {
    //   if (typeof i === "object") {
    //     this.$store.commit("increment");
    //   } else if (typeof i === "number") {
    //     this.$store.commit("increment", i);
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
</style>